<template>
  <div class="wrapper" ref="wrap">
    <ul>
      <li v-for="item in 40" :key="item">
        第{{item}}个li
      </li>
    </ul>
    <div class="back" @click="handleBack">返回顶部</div>
  </div>
</template>

<script>
  import BScroll from '@better-scroll/core'
  export default {
    mounted () {
      this.bs = new BScroll(this.$refs.wrap, {
        // ...... 详见配置项
        click:true
      })
    },
    methods: {
      handleBack() {
        console.log(123);
        this.bs.scrollTo(0,0,500)
      }
    },
  }
</script>

<style lang="less" scoped>
.wrapper{
  height: 100vh;
  border: 1px solid red;
  // overflow: scroll;
  overflow: hidden;
  li{
    line-height: 30px;
    margin: 30px;
    background: orange;
  }
}
.back{
  height: 50px;
  width: 50px;
  line-height: 50px;
  font-size: 12px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 10px 2px rgba(0,0,0,0.3);
  position:fixed;
  bottom: 10px;
  right: 10px;
}
</style>